<template>
  <div class="roommate-box">
    <!-- 头部 -->
    <Head :title="title" />
    <van-icon
      name="arrow-left"
      class="go-back"
      size="0.6rem"
      @click="gotoBack"
    />

    <!-- 图片 -->
    <div class="roommate-img">
      <img src="../../../assets/bannerImg/1.jpg" alt="" />
    </div>

    <!-- 房子信息 -->
    <div class="roommate-house-box">
      <!-- 具体信息 -->
      <div class="box" v-for="(item, index) in roommateList" :key="index">
        <div class="roommate-house">
          <ul>
            <li class="house-title">
              <span class="house-title-left"> {{ item.have }} </span>
              <span class="house-title-right"> {{ item.title }} </span>
            </li>
            <li class="house-img">
              <img :src="item.house" alt="" />
            </li>
            <li class="house-footer">
              <div class="house-footer-left-box">
                <span class="house-footer-left">
                  <img :src="item.headPic" alt="" />
                </span>
                <span class="house-footer-center"> {{ item.name }} </span>
              </div>
              <div>
                <span class="house-footer-right"> {{ item.upData }} </span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Head from "../../../components/head/Head";
import api from "../../../api";
import loading from "../pullLoading/pullLoading.js";
import { Dialog } from "vant";

export default {
  name: "Roommate",
  data() {
    return {
      title: "找舍友",
      page: 2,
      roommateList: [],
    };
  },
  components: {
    Head,
  },
  mounted() {
    this.http();
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    gotoBack() {
      this.$router.push("/");
    },
    http() {
      api.gotoRoommateHouse().then((res) => {
        console.log(res.data);
        this.roommateList = [...this.roommateList, ...res.data.list];
        this.page++;
        console.log(this.page);
      });
    },
    handleScroll() {
      if (this.page < 6) {
        loading(this.page, this.http);
      } else {
        Dialog({ message: "客官，已经没有更多房源了..." });
        this.page = 1;
        window.removeEventListener("scroll", this.handleScroll);
      }
    },
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>

<style scoped>
.roommate-box {
  position: relative;
}
.go-back {
  position: absolute;
  top: 0.45rem;
  left: 0.5rem;
}

.roommate-img {
  width: 100%;
  height: 4.6rem;
  overflow: hidden;
}
.roommate-img img {
  width: 100%;
  height: 100%;
}
.roommate-house-box {
  width: 100%;
  height: 5rem;
  margin: 0 auto;
  position: relative;
  top: -0.5rem;
  padding-top: 0.01rem;
}
.box {
  margin-top: 0.2rem;
}
.roommate-house {
  width: 85%;
  background-color: #ffffff;
  margin: 0 auto;
  border-radius: 0.1rem;
  padding-left: 0.25rem;
  box-shadow: 0px 0px 20px #ccc;
}
.house-title {
  text-align: left;
  padding-top: 0.1rem;
  font-size: 13px;
}
.house-title-left {
  border: 0.01rem solid #e6e6e6;
  border-radius: 0.1rem;
  padding: 0.03rem 0.25rem;
  color: rgba(000, 000, 000, 0.5);
}
.house-title-right {
  margin-left: 0.2rem;
  color: rgba(000, 000, 000, 0.8);
}
.house-img {
  height: 2.08rem;
  width: 60%;
  padding-top: 0.1rem;
}
.house-img img {
  width: 100%;
  height: 100%;
}
.house-footer {
  padding: 0.1rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: rgba(000, 000, 000, 0.8);
}
.house-footer-left-box {
  display: flex;
  align-items: center;
}
.house-footer-left {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  overflow: hidden;
}
.house-footer-left img {
  width: 100%;
  height: 100%;
}
.house-footer-center {
  padding-left: 0.15rem;
}
.house-footer-right {
  color: #ff5555;
  font-size: 15px;
  padding-right: 0.3rem;
}
.show-info {
  text-align: left;
  font-size: 16px;
  color: #ff5555;
  background-color: rgba(204, 204, 204, 0.3);
  border-bottom: 0.01rem solid;
  padding: 0.2rem 0 0.1rem 0.3rem;
  position: absolute;
  bottom: 0;
}
</style>